<script setup lang="ts">
import {reactive, provide, onMounted, ref, computed} from 'vue';
import UserInfoPage from '../../components/UserInfoPage.vue'
import {userStore} from "@/store/user";

const userInfo = ref<any>({})
const state = reactive({
  show: false
})

const closeChange = () => {
  state.show = false
}
provide('popup', {
  closeChange
})
onMounted(() => {
  userStore().getUserInfo().then(res => {
    userInfo.value = res
  })
})
const userAvatar = computed(() => {
  return "/api" + userInfo.value.avatar
})
</script>
<template>
  <div class="person-info">
    <div class="info-left">
      <h3>{{ userInfo.nickName }}<img src="@/assets/img/my/icon-feedback.png" @click="state.show = true"/></h3>
    </div>
    <img :src="userAvatar"/>
  </div>

  <!--切换城市弹窗-->
  <van-popup v-model:show="state.show" position="top" duration="0" :style="{ width: '100%',height: '100%' }">
    <UserInfoPage></UserInfoPage>
  </van-popup>
</template>
<style scoped>
.person-info {
  padding: 0.99rem 0 1.41rem;
  margin: 0 0.72rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #F3F3F3;
}

.person-info img {
  width: 3.19rem;
  height: 3.19rem;
  border-radius: 50%;
}

.info-left h3 {
  font-size: 1.28rem;
  line-height: 1.28rem;
  font-weight: 400;
  color: #333333;
  margin-bottom: 0.64rem;
  display: flex;
  align-items: flex-end;
}

.info-left img {
  width: 1rem;
  height: 1rem;
  margin-left: 0.32rem;
}

.info-left p {
  font-size: 0.69rem;
  line-height: 0.69rem;
  font-weight: 300;
  color: #666666;
}
</style>